<template>
  <div>

     
	  	<myheader></myheader>

		<div id="carousel" class="carousel slide" data-ride="carousel">
		
	
			<!-- <ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul> -->
	
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<!-- <div class="carousel-item active">
					<div class="container slide-textonly">
						<div>
							<h1>York &amp; Smith</h1>
							<p class="lead">Spring/Summer 2018 Collection</p>
							<a href="#" class="btn btn-outline-secondary">View Collection</a>
						</div>
					</div>
				</div> -->

				<!-- 幻灯片组件 -->
				<Carousel :height="700" :datas='params'>

				</Carousel>
				
			
			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">Featured Products</h3>
				<div class="row">

					<!-- 遍历商品 -->

					<div class="col-sm-6 col-md-3 col-product" v-for="(item,index) in datalist" :key="index">
						<router-link :to="{path:'/item',query:{gid:item.id}}"><figure>
							<img class="rounded-corners img-fluid" :src="adminurl+'/static/upload/'+item.img"	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure></router-link>
						<h4><a href="/item">{{item.name}}</a></h4>
						<p><span class="emphasis">{{item.price}}</span></p>
					</div>

					<br>
					
					
					
				</div>
					<!-- 分页 -->
					<a  @click="get_goods(prev)">上一页</a>
					&nbsp;&nbsp;&nbsp;
					<a  @click="get_goods(item)" v-for="(item,index) in pages" :key="index">{{ item }}</a>
					&nbsp;&nbsp;&nbsp;
					<a  @click="get_goods(next)">下一页</a>


					<!-- heiui分页 -->
					<!-- <div>
						<Pagination v-model="pagination" @change="change"></Pagination>
					</div> -->
			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		<myfooner></myfooner>
		
    
  </div>
  
</template>
<script>
import myheader from './myheader'
import myfooner from './myfooner'
import {config} from '../config'
export default {
  data () {
    return {
	  msg: "这是一个变量",
	  adminurl:config['adminurl'],
	  //   幻灯片数据
	  params:[],
	  datalist:[],
	//   自制分页
	// 页数列表
	  pages:[],
	//   上一页
	  prev:"",
	// 下一页
	  next:""

	//   分页器变量
	//   pagination:{
	// 	  page:1,
	// 	  size:3,
	// 	  total:4
	//   }
    }
  },
  mounted:function(){
	  this.get_goods(1)
	  this.getpics()


	  var username = this.$route.query.username
	  var uid = this.$route.query.uid
	  if(username == null){
		  return false
	  }else{
		  localStorage.setItem("username",username)
		  localStorage.setItem('uid',uid)
		  return false
	  }
	  
   
  
	},
  methods:{
	//   获取幻灯片
	  getpics:function(){
		  this.axios.get(this.adminurl+"/insertpics/").then(res=>{
			  this.params = res.data

		  })
	  },
	// 自制分页逻辑
	  get_goods(page){
		  this.axios.get(this.adminurl+"/goodslist/",{params:{'page':page,'size':3}}).then(res=>{
			  console.log(res)
			  this.datalist = res.data.data
			  this.pages = res.data.pages
			  this.prev = res.data.prev
			  this.next = res.data.next
		  })
	  },

	//   heiui 获取所有goods
	//   getgoods(){
	// 	  this.axios.get(this.adminurl+"/goodslist/",{params:{'page':this.pagination.page,'size':this.pagination.size}}).then(res=>{
	// 		  console.log(res)
	// 		  this.datalist = res.data.data
	// 	  })
	//   },
	//   heiui分页
	//   change(){
	// 	  this.getgoods()
	//   }
     
  },
  components:{
	  "myheader":myheader,
	  "myfooner":myfooner

  },
}



</script>
 
<style>



</style>